<script setup lang="ts">
import type { TabType } from './Comps/Tabs.vue';
import Tip2FA from '~comp-b/auth/2fa/Tip2FA.vue';
import { CloseBtn } from '~/components/card';
import Tabs, { getMobileTabs } from './Comps/Tabs.vue';
import Deposit from './Deposit/index.vue';
import { DEF_TAB_KEY, type WalletProps } from './PcWallet.vue';
import Withdraw from './Withdraw/index.vue';

const props = withDefaults(defineProps<WalletProps>(), { initTab: DEF_TAB_KEY });

const { verified } = storeToRefs(useUserStore());

const isIndexPage = ref(!props.isDepositPage);

function backIndexPage() {
  isIndexPage.value = true;
}

const getTabsRef = computed(() => getMobileTabs());

const getDefActiveTab = computed(() => {
  const _key = props.initTab || DEF_TAB_KEY;
  return getTabsRef.value.find(x => !x.disabled && x.key === _key);
});

const activeTab = ref(getDefActiveTab.value);

if (props.isDepositPage) {
  activeTab.value = getTabsRef.value.find(x => !x.disabled && x.key === 'deposit');
  isIndexPage.value = false;
}

function selectTab(tab: TabType) {
  if (tab.key === 'pay') {
    isIndexPage.value = true;
    antdMessage.warning({ content: $t('56Kpc6XNqChcuWz08yQwa'), duration: 2 });
    return;
  }
  activeTab.value = tab;
  isIndexPage.value = false;
}

function close() {
  props.onClose?.();
  backIndexPage();
}

const tip2FADomRef = ref();
const getHeightStyleRef = computed(() => {
  const domH = tip2FADomRef.value?.$el?.offsetHeight ?? 63;
  const hv = domH + 24;
  return { height: verified.value?.authenticator ? `var(--dfvh)` : `calc(var(--dfvh) - ${hv}px)` };
});
</script>

<template>
  <div
    class="pointer-events-auto relative w-full flex flex-col rounded-t-lg p-3 !bg-sys-layer-c"
    :style="getHeightStyleRef"
  >
    <Tip2FA
      ref="tip2FADomRef"
      class="absolute left-3 right-3 -order-1 -transform-translate-y-135%"
      @open="close"
    />
    <div class="mb-3 flex-between">
      <div v-if="isIndexPage" class="text-lg font-semibold">
        {{ $t('qJaOFvSHkapUsSa7qb0s') }}
      </div>
      <div v-else class="flex items-center gap-x-2 text-lg font-semibold" @click="backIndexPage">
        <i class="i-ep:arrow-left-bold text-sys-head h-4.5 w-4.5" />
        <div>{{ activeTab?.label }}</div>
      </div>
      <CloseBtn @click="close" />
    </div>

    <div class="flex-1 lt-mobile:(h-full overflow-y-auto)">
      <Tabs v-if="isIndexPage" isMobile class="pb-10 pt-5" @select="selectTab" />
      <Deposit v-else-if="!isIndexPage && activeTab?.key === 'deposit'" :depositReadyQry="readyAllQry?.depositReadyQry" :checkedBonusKey="checkedBonusKey" />
      <Withdraw v-else-if="!isIndexPage && activeTab?.key === 'withdraw'" :withdrawReadyQry="readyAllQry?.withdrawReadyQry" />
    </div>
  </div>
</template>
